<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab栏切换</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery2.1.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>
</head>
<body>
<ul class="nav nav-tabs" id="mytab">
    <li><a href="#one" data-toggle="tab">首页</a></li>
    <li><a href="#two" data-toggle="tab">介绍 </a></li>
    <li><a href="#three" data-toggle="tab">消息 </a></li>
    <li><a href="#four" data-toggle="tab">设置 </a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="one">1111111111111</div>
    <div class="tab-pane" id="two">2222222222222</div>
    <div class="tab-pane" id="three">3333333333333</div>
    <div class="tab-pane" id="four">4444444444444</div>

</div>

<script>
    $(function (){
        $('#mytab a:first').tab('show');     //初始化显示第一个tab
    })
</script>
</body>
</html>